<template>
    <div id="auditRecordQuery">
        <div class="selectTypeBar1">
        查找类型：
        <el-radio-group v-model="selectType" @change="querySelect">
            <el-radio-button label="用户审核记录" ></el-radio-button>
            <el-radio-button label="停车场审核记录" ></el-radio-button>            
        </el-radio-group>
        </div>
        <div class="selectTypeBar2">
            <div id="userAudit" >
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户名">
                        <el-autocomplete class="inline-input" v-model="formInline.username" 
                        :fetch-suggestions="querySearchUsername"   placeholder="用户名" 
                        ></el-autocomplete>
                </el-form-item>
                <el-form-item label="管理员">
                    <el-autocomplete class="inline-input" v-model="formInline.managerName" 
                    :fetch-suggestions="querySearchManagerName"   placeholder="管理员名称" 
                    ></el-autocomplete>
                </el-form-item>
                <br>
                <span class="demonstration">审核时间  </span>
                <el-date-picker v-model="formInline.timeZone"  type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :picker-options="pickerOptions">
                </el-date-picker>

                <el-form-item style="margin-left:10px">
                    <el-button type="primary" @click="onSubmitForUser">查询</el-button>
                </el-form-item>
                </el-form>
                <div class="radio">
                    排序：
                    <el-radio-group v-model="reverse">
                    <el-radio :label="true">正序</el-radio>
                    <el-radio :label="false">倒序</el-radio>
                    </el-radio-group>
                </div>

                <el-timeline :reverse="reverse">
                    <el-timeline-item                
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.timestamp"> 
                    <el-row :gutter="20">
                        <el-col :span="18" :offset="3">
                            <el-descriptions class="margin-top"  :column="3" :size="size" border>
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        审核结果：
                                    </template>
                                    <span v-if="activity.isaudit==1">未通过</span>
                                        <span v-if="activity.isaudit==2">通过</span>
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        审核信息：
                                    </template>
                                    {{activity.message}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        用户id:
                                    </template>
                                    {{activity.userId}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        用户名:
                                    </template>
                                    {{activity.username}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        管理员id:
                                    </template>
                                    {{activity.managerId}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        管理员：
                                    </template>
                                    {{activity.managerName}}
                                </el-descriptions-item> 
                            </el-descriptions>
                        </el-col>
                    </el-row>
                                      
                    </el-timeline-item>
                </el-timeline>
            </div>


            <div id="parkingSpaceAudit" style="display:none">
                <el-form :inline="true" :model="parkingSpaceFormInline" class="demo-form-inline">
                <el-form-item label="用户名">
                        <el-autocomplete class="inline-input" v-model="parkingSpaceFormInline.username" 
                        :fetch-suggestions="querySearchUsername"   placeholder="用户名" 
                        ></el-autocomplete>
                </el-form-item>
                <el-form-item label="物业名">
                        <el-autocomplete class="inline-input" v-model="parkingSpaceFormInline.propertyName" 
                        :fetch-suggestions="querySearchPropertyName"   placeholder="物业名" 
                        ></el-autocomplete>
                </el-form-item>
                <el-form-item label="管理员">
                    <el-autocomplete class="inline-input" v-model="parkingSpaceFormInline.managerName" 
                    :fetch-suggestions="querySearchManagerName"   placeholder="管理员名称" 
                    ></el-autocomplete>
                </el-form-item>
                <el-form-item label="停车场地址">
                    <el-autocomplete class="inline-input" v-model="parkingSpaceFormInline.parkingSpaceAddr" 
                    :fetch-suggestions="querySearchParkingSpaceAddr"   placeholder="停车场地址" 
                    ></el-autocomplete>
                </el-form-item>
                <br>
                <span class="demonstration">审核时间  </span>
                <el-date-picker v-model="parkingSpaceFormInline.timeZone"  type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :picker-options="pickerOptions">
                </el-date-picker>

                <el-form-item style="margin-left:10px">
                    <el-button type="primary" @click="onSubmitForParkingSpace">查询</el-button>
                </el-form-item>
                </el-form>
                 <div class="radio">
                    排序：
                    <el-radio-group v-model="reverse2">
                    <el-radio :label="true">正序</el-radio>
                    <el-radio :label="false">倒序</el-radio>
                    </el-radio-group>
                </div>

                <el-timeline :reverse="reverse2">
                    <el-timeline-item                
                    v-for="(activity, index) in parkingSpaceActivities"
                    :key="index"
                    :timestamp="activity.timestamp">
                    <el-row :gutter="20">
                        <el-col :span="18" :offset="3">
                            <el-descriptions class="margin-top"  :column="3" :size="size" border>
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        审核结果：
                                    </template>
                                    <span v-if="activity.isaudit==1">未通过</span>
                                    <span v-if="activity.isaudit==2">通过</span>
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        审核信息：
                                    </template>
                                    {{activity.message}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        用户id:
                                    </template>
                                    {{activity.userId}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        用户名:
                                    </template>
                                    {{activity.username}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        停车场id:
                                    </template>
                                    {{activity.parkingSpaceId}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        停车场地址:
                                    </template>
                                    {{activity.parkingSpaceAddr}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        物业名称：
                                    </template>
                                    {{activity.propertyName}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        物业比例：
                                    </template>
                                    {{activity.propertyManagerGet}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                        平台比例：
                                    </template>
                                    {{activity.platoformGet}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                         管理员id:
                                    </template>
                                    {{activity.managerId}}
                                </el-descriptions-item> 
                                <el-descriptions-item label-class-name="mylabel" >
                                    <template slot="label">
                                        <i class="el-icon-tickets"></i>
                                         管理员：
                                    </template>
                                    {{activity.managerName}}
                                </el-descriptions-item> 
                            </el-descriptions>
                        </el-col>
                    </el-row>                     
                    </el-timeline-item>
                </el-timeline>
            </div>
           
        </div>


    </div>
</template>

<style>
    .selectTypeBar1{
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .selectTypeBar2{
        margin-top:30px;
        margin-bottom: 10px;
    }
    .inline-input{
        width: 400px;
    }
</style>

<script>
export default {
    name:"auditRecordQuery",
    
    data(){
        return {
            showValue:'block',
            reverse:true,
            reverse2:true,
            size:'',
            activities: [],
            parkingSpaceActivities:[],
            selectType:'用户审核记录',
            selectBy:'',
            selectValue:'',
            formInline: {
                username: '',
                managerName: '',
                timeZone:''
            },
            parkingSpaceFormInline:{
                username:'',
                propertyName:'',
                managerName:'',
                parkingSpaceAddr:'',
                timeZone:''
            },
            usernameData:[],
            managerNameData:[],
            propertyNameData:[],
            parkingSpaceAddrData:[],
            pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
            },
            time:'',
        }
    },
    methods:{
        onSubmitForParkingSpace(){
            this.parkingSpaceActivities=[],
            this.$axios.get("/getParkingSpaceAuditByCondition",{params:{
                managerName:this.parkingSpaceFormInline.managerName,
                username:this.parkingSpaceFormInline.username,
                propertyName:this.parkingSpaceFormInline.propertyName,
                parkingSpaceAddr:this.parkingSpaceFormInline.parkingSpaceAddr,
                beginTime:this.parkingSpaceFormInline.timeZone[0],
                endTime:this.parkingSpaceFormInline.timeZone[1]
            }})
            .then(resp=>{                
                if(resp.data.success){
                    if(resp.data.data.length==0){
                        this.$message("未找到您搜索的数据")
                    } else{                    
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={
                            isaudit:resp.data.data[i].isaudit,
                            message:resp.data.data[i].message,
                            userId:resp.data.data[i].userId,
                            username:resp.data.data[i].username,
                            parkingSpaceId:resp.data.data[i].parkingSpaceId,
                            parkingSpaceAddr:resp.data.data[i].parkingSpaceAddr,
                            propertyName:resp.data.data[i].propertyName,
                            propertyManagerGet:resp.data.data[i].propertyManagerGet,
                            platoformGet:resp.data.data[i].platoformGet,
                            managerId:resp.data.data[i].managerId,
                            managerName:resp.data.data[i].managerName,
                            timestamp:resp.data.data[i].rowAddTime
                        }
                        this.parkingSpaceActivities[i]=obj;                        
                    }
                    this.$forceUpdate();
                    }
                }else{
                    this.$message({
                        message:resp.data.message,
                        type:"warning"
                    })
                }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })

        },
        querySelect(){           
           var userAuditForm= document.getElementById("userAudit");
           var parkingSpaceAuditForm= document.getElementById("parkingSpaceAudit");
           userAuditForm.style.display=userAuditForm.style.display=="none"?"block":"none";
           parkingSpaceAuditForm.style.display=parkingSpaceAuditForm.style.display=="none"?"block":"none";
        },
        onSubmitForUser(){ 
            this.activities=[],          
            this.$axios.get("/getUserAuditByCondition",{params:{
                managerName:this.formInline.managerName,
                username:this.formInline.username,
                beginTime:this.formInline.timeZone[0],
                endTime:this.formInline.timeZone[1]
            }})
            .then(resp=>{                
                if(resp.data.success){
                    if(resp.data.data.length==0){
                        this.$message("未找到您搜索的数据")
                    } else{                    
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={
                            isaudit:resp.data.data[i].isaudit,
                            managerId:resp.data.data[i].managerId,
                            managerName:resp.data.data[i].managerName,
                            message:resp.data.data[i].message,
                            userId:resp.data.data[i].userId,
                            username:resp.data.data[i].username,
                            timestamp:resp.data.data[i].rowAddTime
                        }
                        this.activities[i]=obj;
                        
                    }
                   this.$forceUpdate();
                    }
                }else{
                    this.$message({
                        message:resp.data.message,
                        type:"warning"
                    })
                }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        },
        querySearchUsername(queryString, cb) {
            var data = this.usernameData;
            var results = queryString ? data.filter(this.createFilter(queryString)) : data;
            // 调用 callback 返回建议列表的数据
            
            cb(results);
        },
        querySearchManagerName(queryString, cb) {
            var data = this.managerNameData;
            var results = queryString ? data.filter(this.createFilter(queryString)) : data;
            // 调用 callback 返回建议列表的数据
            
            cb(results);
        },
        querySearchPropertyName(queryString, cb) {
            var data = this.propertyNameData;
            var results = queryString ? data.filter(this.createFilter(queryString)) : data;
            // 调用 callback 返回建议列表的数据
            
            cb(results);
        },
        querySearchParkingSpaceAddr(queryString, cb) {
            var data = this.parkingSpaceAddrData;
            var results = queryString ? data.filter(this.createFilter(queryString)) : data;
            // 调用 callback 返回建议列表的数据
            
            cb(results);
        },
        createFilter(queryString) {
            return (data) => {
                return (data.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        getUsername(){
            this.$axios.get("/getUsername",{params:{}})
            .then(resp=>{                
                if(resp.data.success){
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={value:''};
                        obj.value = resp.data.data[i];
                        this.usernameData[i]=obj;                        
                    }                   
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        },  
        getManagerName(){
            this.$axios.get("/getManagerName",{params:{}})
            .then(resp=>{                
                if(resp.data.success){
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={value:''};
                        obj.value = resp.data.data[i];
                        this.managerNameData[i]=obj;                        
                    }                   
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        },  
        getPropertyName(){
            this.$axios.get("/getPropertyManagerName",{params:{}})
            .then(resp=>{                
                if(resp.data.success){
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={value:''};
                        obj.value = resp.data.data[i];
                        this.propertyNameData[i]=obj;                        
                    }                   
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        },  
        getParkingSpaceAddr(){
            this.$axios.get("/getAddr",{params:{}})
            .then(resp=>{                
                if(resp.data.success){
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={value:''};
                        obj.value = resp.data.data[i];
                        this.parkingSpaceAddrData[i]=obj;                        
                    }                   
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        },  
    },
    mounted(){
        this.getUsername();
        this.getManagerName();
        this.getPropertyName();
        this.getParkingSpaceAddr();
    }
}
</script>